<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆案例</title>
    <style>
        body {
            background-image: url("../img/bg.png");
        }

        div {
            text-align: center;
        }

        .container {
            width: 60%;
            margin: auto;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
<form action="" method="get">
    <img src="../img/logo.png" alt="">
    <div class="container">
        <div class="row1">注册详情</div>
        <hr/>
        <div>
            <label for="username">姓名</label>
            <input type="text" name="username" id="username" autocomplete="off" placeholder="请输入姓名">
            <br/>
            <label for="password">密码</label>
            <input type="password" name="password" id="password" autocomplete="off" placeholder="请输入密码">
            <br/>
            <label for="email">邮箱</label>
            <input type="email" name="email" id="email" autocomplete="off" placeholder="请输入邮箱">
            <br/>
            <label for="tel">手机</label>
            <input type="tel" name="tel" id="tel" autocomplete="off" placeholder="请输入手机">
        </div>
        <hr/>
        <div>
            <label for="gender">性&nbsp;&nbsp;&nbsp;别</label>&nbsp;&nbsp;&nbsp;
            <input type="radio" name="gender" id="gender" value="male">男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="gender"  value="female" checked>女
            <br/>
            <label for="hobby">爱&nbsp;&nbsp;&nbsp;好</label>&nbsp;&nbsp;&nbsp;
            <input type="checkbox" name="hobby" id="hobby" value="eat" checked>吃
            <input type="checkbox" name="hobby"  value="drink">喝
            <input type="checkbox" name="hobby"  value="smoke">抽
            <br/>
            <label for="date">出生日期</label>
            <input type="date" name="date" id="date" value="">
            <br/>
            <label for="city">所在城市</label>
            <select name="city" id="city" >
                <option value="">请输入您所在的城市</option>
                <option value="taiyuan" selected>太原</option>
                <option value="xian">西安</option>
                <option value="beijing">北京</option>
            </select>
        </div>
        <hr/>
        <div>
            <label for="profile">个性签名:</label>
            <textarea name="profile" id="profile" cols="30" rows="10" placeholder="please input here"></textarea>
        </div>
        <hr/>
        <div>
            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </div>
    </div>
</form>
</body>
</html>